<template>

	<div class="app-container" v-loading="data.mtloading">


		<div class="border border-[#4B8DF8]">
			<div class="bg-[#4B8DF8] text-[#fafafa] text-lg p-2 px-4 mb-4">{{ $t('machine.trade.switchConfig') }}</div>

			<div class="px-4">

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.switchApp') }}：</div>
					<div class="pl-8 w-3/12">
						<el-radio v-model="data.info.status" :label="1" border> {{ $t('public.open') }} </el-radio>
						<el-radio v-model="data.info.status" :label="2" border>{{ $t('public.close') }}</el-radio>
					</div>
				</div>

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.downAut') }}：</div>
					<div class="pl-8 w-3/12">
						<el-time-picker v-model="data.close_time" format="HH:mm" value-format="HH:mm" :clearable="false"
							style="width: 100%;" />
					</div>
				</div>

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.startAut') }}：</div>
					<div class="pl-8 w-3/12">
						<el-time-picker v-model="data.open_time" format="HH:mm" value-format="HH:mm" :clearable="false"
							style="width: 100%;" />
					</div>
				</div>

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.executionAut') }}：</div>
					<div class="pl-8 w-9/12">
						<el-tag v-for="item of data.week" @click="setweek(item.value)" type="warning" size="large"
							class="w-20 mr-6 cursor-pointer">{{ item.label }}</el-tag>
					</div>
				</div>

				<div class="w-full flex flex-wrap h-12 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.executionAutTime') }}：</div>
					<div class="pl-8 w-9/12 flex flex-wrap">
						<div v-for="item of data.week_time" class="w-20 mr-6 border text-center">
							<div class=" leading-6" v-if="item.open != ''">{{ item.open || '' }}</div>
							<div class=" leading-6" v-if="item.close != ''">{{ $t('machine.trade.sameDay') }}{{ item.close
								|| '' }}</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="border border-[#FFB848] mt-8">
			<div class="bg-[#FFB848] text-[#fafafa] text-lg p-2 px-4 mb-4">{{ $t('machine.trade.businesConfig') }}</div>

			<div class="px-4">

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.automaticStop') }}：</div>
					<div class="pl-8 w-3/12">
						<el-time-picker v-model="data.cease_time" format="HH:mm" value-format="HH:mm" :clearable="false"
							style="width: 100%;" />
					</div>
				</div>

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.restore') }}：</div>
					<div class="pl-8 w-3/12">
						<el-time-picker v-model="data.restore_time" format="HH:mm" value-format="HH:mm"
							:clearable="false" style="width: 100%;" />
					</div>
				</div>

				<div class="w-full flex flex-wrap h-10 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.executionAut') }}：</div>
					<div class="pl-8 w-9/12">
						<el-tag v-for="item of data.week" @click="setmac(item.value)" type="warning" size="large"
							class="w-20 mr-6 cursor-pointer">{{ item.label }}</el-tag>
					</div>
				</div>

				<div class="w-full flex flex-wrap h-12 leading-10 mb-4">
					<div class="language = 'en'?' ':'w-32">{{ $t('machine.trade.executionAutTime') }}：</div>
					<div class="pl-8 w-9/12 flex flex-wrap">
						<div v-for="item of data.mac_time" class="w-20 mr-6 border text-center">
							<div class="h-6 leading-6" v-if="item.open != ''">{{ item.open || '' }}</div>
							<div class="h-6 leading-6" v-if="item.close != ''">{{ $t('machine.trade.sameDay') }}{{
								item.close || '' }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="w-1/2 text-left mt-6 ml-6">
			<div class="inline-block">
				<el-button type="primary" @click="submit">{{ $t('public.save') }}</el-button>
				<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
			</div>
		</div>
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { updateonoff } from '@/api/machine_trade';
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
let data = reactive({
	mtloading: false, // 加载
	week: [], // 执行周期
	week_time: [], // 开关机配置 - 自动执行时间
	mac_time: [], // 设备营业配置 - 自动执行时间
	info: { // 主体信息
		moo_id: '',
		on_off_ckc: '',
		on_off_machine: '',
		status: '',
	},
	close_time: '22:00', // 自动关闭时间
	open_time: '07:00', // 自动开启时间
	cease_time: '22:00', // 自动停止营业时间
	restore_time: '07:00', // 恢复营业时间
})
let cancell = () => {
	router.back()
}
// 加载数据
let setinfo = () => {
	let info = JSON.parse(decodeURI(route.query.l)).info
	for (let key in data.info) {
		data.info[key] = info[key]
	}

	let week = [
	{ label: $t('mock.Monday'), value: '0' },
		{ label: $t('mock.Tuesday'), value: '1' },
		{ label: $t('mock.Wednesday'), value: '2' },
		{ label: $t('mock.Thursday'), value: '3' },
		{ label: $t('mock.Friday'), value: '4' },
		{ label: $t('mock.Saturday'), value: '5' },
		{ label: $t('mock.Sunday'), value: '6' },
	]
	data.week_time = []
	data.mac_time = []
	for (let i = 0; i <= 6; i++) {
		data.week_time.push({ value: '' + i + '', open: '', close: '' })
		data.mac_time.push({ value: '' + i + '', open: '', close: '' })
	}

	// 开关机
	if (info.on_off_machine != '') {
		let week_time = JSON.parse(decodeURI(info.on_off_machine))
		for (let key in week_time) {
			let arr = week_time[key].split(',')
			data.week_time[key].open = arr[0]
			data.week_time[key].close = arr[1]
		}
	}

	// 营业配置
	if (info.on_off_ckc != '') {
		let mac_time = JSON.parse(decodeURI(info.on_off_ckc))
		for (let key in mac_time) {
			let arr = mac_time[key].split(',')
			data.mac_time[key].open = arr[0]
			data.mac_time[key].close = arr[1]
		}
	}
	data.week = week
}

// 开关机配置 - 自动执行周期
let setweek = (e) => {
	data.week_time[e].open = data.close_time
	data.week_time[e].close = data.open_time
}

// 设备营业配置 - 自动执行周期
let setmac = (e) => {
	data.mac_time[e].open = data.cease_time
	data.mac_time[e].close = data.restore_time
}

// 保存
let submit = () => {

	let obj_machine = {}
	let obj_ckc = {}
	for (let item of data.week_time) {
		if (item.open != '' && item.close != '') {
			obj_machine[item.value] = item.open + ',' + item.close;
		}
	}

	for (let item of data.mac_time) {
		if (item.open != '' && item.close != '') {
			obj_ckc[item.value] = item.open + ',' + item.close;
		}
	}

	if (JSON.stringify(obj_machine) != '{}') {
		data.info.on_off_machine = JSON.stringify(obj_machine)
	}

	if (JSON.stringify(obj_ckc) != '{}') {
		data.info.on_off_ckc = JSON.stringify(obj_ckc)
	}

	data.mtloading = true

	updateonoff(data.info).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modify'),
				type: 'success'
			})
			router.back()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}



setinfo()

</script>